<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
      <h1>原数据：{{num}}</h1>
      <h1>计算属性：{{douNum}}</h1>
      <h1>方法：{{mDou()}}</h1>
      <button @click="change">改变</button>
      <hr>
      输入内容： <input type="text" v-model="msg">
           <h1>输入的内容数据：{{msg}}</h1>
          <h1>计算属性处理的内容：{{reMsg}}</h1>
      <hr>
     <h2 v-for="(item,index) in Nlist" :key="index">{{item}}</h2>     
     <hr>
     <!-- 计算属性双向绑定 -->
     <input type="text" v-model="fullName">
      <h1>{{fullName}}</h1>
     <h1>{{firstname}}</h1>
      <h1>{{lastname}}</h1>
  <script src="./vue.js"></script>
  <script>
    //  1.计算属性也是Vue实例对象上的属性，可以通过实例对象.xx方式读取
    //      2.一般计算属性都依赖于data对象中的属性，当data对象中的属性值发生变化则计算属性中的值发生变化。
    // 3.某些时候计算属性和方法可以达到同样的效果，但是计算属性有缓存（即它所依赖的
    //  data中的属性值不发生变化则此计算属性只计算一次，并将其缓存），而方法没有，每 一次使用都要重新计算，当在高频率的计算时，方法开销比较大。      
    new Vue({
      el:"#app",
      data(){
        return{
           firstname:"a",
           lastname:"b",
           num:12,
           msg:"",
           list:["北京","上海","深圳","广州"]
        }
      },
      methods: {
        change(){
          this.num++
        },
        mDou(){
          return this.num*2
        }
      },
      computed:{ //计算属性 计算属性名称不能和data数据相同
        // 
        douNum(){
          let dou=this.num*2
          return dou
        },
        reMsg(){
          return this.msg.split('').reverse().join('')
        },
        Nlist(){
          let arr=this.list.map(item=>{
            return item+"市"
          })
          return arr
        },
        // 计算属性的get和set写法 写成对象
        fullName:{
           get(){
             return this.firstname+'-'+this.lastname
           },
           set(value){ //set拦截到的数据给data中赋值
              let arr=value.split('-')
              this.firstname=arr[0];
              this.lastname=arr[1]
           }
        }
      }
    })
  </script>
</body> 
</html>